<template>
  <van-tabbar :v-model="active" route active-color="#4e54c8" safe-area-inset-bottom>
    <van-tabbar-item
      v-for="(item, index) in tabItems"
      :key="index"
      :name="item.name"
      :to="item.path"
      :icon="item.icon"
    >
      {{ item.text }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

interface TabItem {
  name: string
  text: string
  path: string
  icon: string
}

export default defineComponent({
  name: 'Tabbar',
  props: {
    active: {
      type: String,
      default: 'home',
    },
  },

  setup() {
    const tabItems = ref<TabItem[]>([
      { name: 'home', text: '首页', path: '/', icon: 'home-o' },
      { name: 'order', text: '下单', path: '/order', icon: 'orders-o' },
      { name: 'tasks', text: '任务', path: '/tasks', icon: 'cluster-o' },
      { name: 'user', text: '我的', path: '/user', icon: 'user-circle-o' },
    ])

    return {
      tabItems,
    }
  },
})
</script>

<style lang="scss" scoped>
.van-tabbar {
  border-top: 1px solid #f1f1f1;
  padding: 5px 0;
  height: 60px;
}
</style>
